<template>
	<Table ref="tableRef" :url="URL_PAGINGHISTORYORDERT" :params="{connectorCode: route.query.connectorCode}"
		:columns="data.columns" :handles="data.handles" :toolbar="data.toolbar" :query="data.query" :key="componentKey">
	</Table>
</template>

<script lang="ts" setup name="historicalOrderList">
	import Table from '@/components/table/index.vue';
	import {
		URL_PAGINGHISTORYORDERT,
	} from '@/service/apis/order';

	const router = useRouter();
	const route = useRoute();

	const tableRef = ref();

	const componentKey = ref(0);
	onActivated(() => {
		console.log("刷新");
		componentKey.value++;
	});

	const data = reactive({
		pickDate: null as any,
		activeTab: 'charge',
		dialogVisible: false,
		orgName: '',
		flowStartChargeSeq: '',
		orderId: '',
		columns: [
			{
				prop: 'connectorCode',
				label: '终端编码',
				width: 140,
			},
			{
				prop: 'startChargeSeq',
				label: '充电单号',
				width: 260,
			},
			{
				prop: 'chargeVin',
				label: '车辆VIN码',
				template: (row : any, index : number) => {
					return row?.chargeVin?.toString() || '--';
				},
				width: 120,
			},
			{
				prop: 'totalAmount',
				label: '订单金额',
			},
			{
				prop: 'actualAmount',
				label: '实收金额',
			},
			{
				prop: 'startTime',
				label: '开始充电时间',
				width: 160,
			},
			{
				prop: 'endTime',
				label: '结束充电时间',
				width: 160,
			},
			{
				prop: 'orderCloseTime',
				label: '订单支付时间',
				width: 160,
			},
			{
				prop: 'chargedTime',
				label: '充电时长',
			},
			{
				prop: 'totalPower',
				label: '已充电量（度）',
				width: 140,
			},
			{
				prop: 'startSoc',
				label: '起始SOC（%）',
				width: 120,
				template: (row : any, index : number) => {
					return row?.startSoc?.toString() || '--';
				},
			},
			{
				prop: 'endSoc',
				label: '结束SOC（%）',
				width: 120,
				template: (row : any, index : number) => {
					return row?.endSoc?.toString() || '--';
				},
			},
			{
				prop: 'stationName',
				label: '电站名称',
				width: 160,
			},
		],
		handles: [
			{
				label: '详情',
				permission: 'historicalOrderList.see',
				handle: (row : any) => {
					console.log('详情---', row);
					router.push({
						name: 'historicalOrderDetail',
						query: { id: row.orderId, type: 'station' },
					});
				},
			},
		],
		toolbar: [
			{
				label: '返回',
				// permission: 'historicalOrderList.export',
				icon: 'icon-back',
				type: 'primary',
				// plain: default,
				handle: (row : any) => {
					router.back();
				},
			},
		],
		query: [
			{
				label: '充电单号',
				prop: 'startChargeSeq',
				comName: 'input',
				props: {
					placeholder: '请输入充电单号',
				},
			},
			{
				label: '开始充电',
				prop: 'startData',
				comName: 'date',
				keys: ['startChargingStartTime', 'startChargingEndTime'],
				props: {
					type: 'daterange',
					calendarChange: (pick : any) => {
						let hasSelectDate = pick !== null && pick.length > 0;
						data.pickDate = hasSelectDate ? pick[0] : null;
					},
					change: (time : any) => {
						if (!time) {
							data.pickDate = null;
						}
					},
					disabledDate: (time : any) : any => {
						if (data.pickDate) {
							const checkTime = data.pickDate.getTime();
							const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
							const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
							return time.getTime() > endTime || time.getTime() < startTime;
						} else {
							return false;
						}
					},
				},
			},
			{
				label: '结束充电',
				prop: 'endData',
				comName: 'date',
				keys: ['endChargingStartTime', 'endChargingEndTime'],
				props: {
					type: 'daterange',
					calendarChange: (pick : any) => {
						let hasSelectDate = pick !== null && pick.length > 0;
						data.pickDate = hasSelectDate ? pick[0] : null;
					},
					change: (time : any) => {
						if (!time) {
							data.pickDate = null;
						}
					},
					disabledDate: (time : any) : any => {
						if (data.pickDate) {
							const checkTime = data.pickDate.getTime();
							const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
							const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
							return time.getTime() > endTime || time.getTime() < startTime;
						} else {
							return false;
						}
					},
				},
			},
		],
	});
</script>

<style scoped>
::v-deep .toolbar-wrap {
  justify-content: flex-end;
}
</style>